<template lang="html">
    <div id="user">
        我是用户<br />
        <hr />
        <ul>
            <router-link
                tag="li"
                :to='{ path: "/user/" + item.id + "/" + item.symbol, query: { "info": "follow" } }'
                v-for="item in userList"
                :key="item.id"
            >
                <a>用户{{ item.id }}</a>
            </router-link>
        </ul>
        <hr />
        <div
            class="userInfo"
            v-if="userInfo.name"
        >
            <p>用户名称：{{ userInfo.name }}</p>
            <p>用户性别：{{ userInfo.gender }}</p>
            <p>用户年龄：{{ userInfo.age }}</p>
        </div>
        <hr />
        <div
            class="infoCont"
            v-if="userInfo.name"
        >
            <router-link exact :to='{ path: "", query: { info: "follow" } }'>他的关注</router-link>
            <router-link exact to="?info=share">他的分享</router-link>
            <div class="infoShow">
                用户信息如下：<br />
                {{ $route.query }}
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    // 用户列表数据
    let userList = [
        {
            "id": 1,
            "name": "Allen",
            "symbol": "vip",
            "gender": "男",
            "age": 30
        },
        {
            "id": 2,
            "name": "Blue",
            "symbol": "vip",
            "gender": "男",
            "age": 18
        },
        {
            "id": 3,
            "name": "Yucy",
            "symbol": "common",
            "gender": "女",
            "age": 28
        },
        {
            "id": 4,
            "name": "kaykay",
            "symbol": "vip",
            "gender": "男",
            "age": 5
        },
        {
            "id": 5,
            "name": "yuyu",
            "symbol": "common",
            "gender": "男",
            "age": 4
        }
    ];

    export default {
        name: "User",
        watch: {
            "$route" () {
                this.getUserData ();
            }
        },
        created () {
            this.getUserData ();
        },
        data () {
            return {
                // 用户数据，理论上应该请求后台接口
                userList,
                // 展示的用户信息
                userInfo: {}
            };
        },
        methods: {
            getUserData () {
                let { id, symbol } = this.$route.params;

                if ( id ) {
                    this.userInfo = this.userList.filter ( item => item.id === Number ( id ) )[0];
                } else {
                    this.userInfo = {};
                }
            }
        }
    };
</script>

<style lang="less" rel="stylesheet/less">

</style>
